<html>
<meta charset="utf-8">

<head>
    <link rel="stylesheet" type="text/css" href="mySheet.css">
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        ul.border {
            list-style: none;
            border: 1px solid;
            margin: 0;
            left: 0;
            right: 0;
            padding: 0;
            background-color:#65A6F3;
            display: inline-block;
        }

        li.inline_gray { 
            list-style: none;
            display: inline;
            background-color: #65A6F3;
            color: #65A6F3;
            cursor: pointer;
            display: inline-block;
        }

        li.inline_white {
            list-style: none;
            display: inline;
            background-color: white;
            cursor: pointer;
            display: inline-block;
        }
    </style>
    <script>
        $(function () {
            $('#type_hour').click(function () {
                var currentClass = $(this).attr('class');
                if (currentClass == 'inline_white') {
                    $(this).removeClass('inline_white');
                    $(this).addClass('inline_gray');
                    $('#type_day').removeClass('inline_gray');
                    $('#type_day').addClass('inline_white');
                } 
            });
            $('#type_day').click(function () {
                var currentClass = $(this).attr('class');
                if (currentClass == 'inline_white') {
                    $(this).removeClass('inline_white');
                    $(this).addClass('inline_gray');
                    $('#type_hour').removeClass('inline_gray');
                    $('#type_hour').addClass('inline_white');
                } 
            });
        })

    </script>
</head>
<ul class="border">
    <li id="type_day" class="inline_white">&nbsp;&nbsp;&nbsp;天&nbsp;&nbsp;&nbsp;</li>
    <li id="type_hour" class="inline_gray">&nbsp;小时&nbsp;</li>
</ul>

</html>